import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./main.scss";
import { Provider } from "react-redux";
import store from "./store";
import { RouterProvider, useSearchParams } from "react-router-dom";
import router from "./router";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
);

/* 
1、关于自动适配移动设备的方法（postcss-px-to-viewport）_OK
    在编译阶段时所使用的一个库。
    vite里面的插件 postcss
    vite构建工具(构建工具) -> postcss(翻译工具) -> postcss-px-to-viewport(插件)
    1.1 安装npm install postcss-px-to-viewport --save-dev
    1.2 配置vite.config.ts
        import postcssPxToViewport from "postcss-px-to-viewport";

        export default defineConfig({
            plugins: [react()],
            css: {
                postcss: {
                plugins: [
                    postcssPxToViewport({
                    unitToConvert: "px", // 要转换的单位 px
                    viewportWidth: 375, // 一倍图
                    unitPrecision: 5, // 装换后的精度
                    propList: ["*"],
                    viewportUnit: "vw", // 装换后的单位
                    fontViewportUnit: "vw",
                    selectorBlackList: [],
                    minPixelValue: 1,
                    mediaQuery: false,
                    replace: true,
                    exclude: undefined,
                    include: undefined,
                    landscape: false, // 横屏是否适配
                    landscapeUnit: "vw",
                    landscapeWidth: 568,
                    }),
                ],
                },
            },
        });

2、配置redux: 全局状态管理，vuex。
        1、npm install @reduxjs/toolkit react-redux
        2、创建仓库 （创建仓库模块（状态片））
        3、创建hooks （因为typescript要强制类型）

3、用@去别名
        1、配置tsconfig.json
          "compilerOptions": {
            "baseUrl": "./",
            "paths": {
              "@/*": ["src/*"]
            }
          }

        2、配置vite.config.ts(要按照node的原生对象的类型: npm install @types/node)
          resolve: {
            alias: {
              "@": path.resolve(__dirname, "./src")
            }
          }

4、路由配置
      1、npm install react-router-dom
      2、创建router.tsx
          import { createHashRouter } from "react-router-dom";
          const router = createHashRouter([
            {
              path: "/",
              element: <div>aaaaaaaaaa</div>,
            },
          ]);
          export default router;
      3、在main导入路由
        import { RouterProvider } from "react-router-dom";
        import router from "./router";

        ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
          <Provider store={store}>
            <RouterProvider router={router} />
          </Provider>
        );

        // 路由传参：
        // 1、searchParams: 问号后面跟的参数。获取，可以用get方法，用...解构
        // http://qq.com/?a=b&b=c
        // let [searchParams, setSearchParmas] = useSearchParams()
        // searchParams.get('a')

        // 2、路由上定义的path: 怎么定义, /:参数1/:参数2, useParams进行获取

        // 3、state: 怎么传递 Link、NavLink、useNavigate 的state属性进行传递。useLocation

        // 函数组件：怎么进行路由跳转?
        // 声明式：Link、NavLink 是组件
        // 编程式：const navigate = useNavigate();
        // navigate(-1)
        // navigate('/login')
        // navigate('/home');

        // class组件：怎么进行路由跳转？
        // 声明式：Link、NavLink 是组件
        // 编程式：没有具体的操作方法。
        //      Navigate 组件进行跳转
        //      {flag && (
        //       当navigate被渲染的时候，就会立马跳转
        //        <Navigate to="/dashboard" replace={true} />
        //      )}

        // 在组件外的路由跳转
        // 引入路由，router.navigate('/home')


5、Axios的配置
      1、npm install axios
      2、在utils新建文件fetch.ts
      3、编写api.ts的代码


6、代理服务器的配置
  server: {
    proxy: {
      "^/api": {
        // 目标请求的地址
        target: "https://52coding.cc/yuantiku_api/",
        changeOrigin: true, // 换源
        rewrite(url) {
          // 此处接受的值是：/api/6666
          return url.replace(/^\/api/, "");
        },
      },
    },
  }
      
typescript
  ?.  可选链 遇到 null 和 undefined 可以立即停止表达式的运行。 
  ??  空值合并运算符 当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。
  !!  等价于 Boolean的转换
  ~~  取整数
  **  求幂
  
  !   非空断言运算符 x! 将从 x 值域中排除 null 和 undefined 
  !.  在变量名后添加，可以断言排除undefined和null类型 _ 数字分割符 分隔符不会改变数值字面量的值，使人更容易读懂数字 .e.g 1_101_324。
*/
